<!--
    * Time    : 2020-12-09 09:55:15
    * Author  : zhangTj
    * Desc    : 余额首页
-->

<template>
    <div class="w750">
        <van-notice-bar
            v-if="!indexData.enablePredeposit || indexStatus"
            left-icon="volume-o"
            scrollable
            text="商家已关闭余额充值， 您暂不能正常使用余额， 如有疑问请联系商家客服~"
        />
        <div class="d-flex flex-column overflow-h h-100">
            <div class="p-2 d-flex flex-column p-1 text-fff bg-main px-3 py-2">
                <div class="d-flex a-center">
                    <div class="d-flex flex-column text-fff flex-1">
                        <span class="opacity-5 font-12">总余额（元）</span>
                        <h1 class="font-32 font-weight-400">{{ money(indexData.total)[0] + '.' + money(indexData.total)[1] || 0 }}</h1>
                    </div>
                    <div
                        v-if="indexData.enableRecharge && indexData.enablePredeposit"
                        @click="toPage('balanceRecharge')"
                        class="bg-fff rounded-20 text-center a-self-center"
                        style="padding: 8px 22px"
                    >
                        <span class="text-main">立即充值</span>
                    </div>
                </div>
                <!-- <div class="grid-column2 mt-2 font-14">
                    <div class="d-flex text-fff a-center">
                        <span>本金：</span>
                        <span>{{ money(indexData.total)[0] + '.' + money(indexData.total)[1] || 0 }}</span>
                    </div>
                    <div class="d-flex text-fff a-center">
                        <span>赠送金：</span>
                        <span>{{ money(indexData.giftMoney)[0] + '.' + money(indexData.giftMoney)[1] || 0 }}</span>
                    </div>
                </div> -->
            </div>
            <div class="mt-2 font-14 bg-fff">
                <div class="d-flex py-15p border-bottom px-1 a-center" @click="toPage('balanceTab')">
                    <div class="flex-1 d-flex a-center">
                        <img src="@/assets/images/pre-icon01.png" alt="" class="v-top mr-15p" style="width: 18px; height: 18px" />
                        <span>余额明细</span>
                    </div>
                    <span class="iconfont iconArrowRight text-999" style="font-size: 12px"></span>
                </div>
                <div class="d-flex py-15p border-bottom px-1 a-center" @click="toPage('balanceRecord')">
                    <div class="flex-1 d-flex a-center">
                        <img src="@/assets/images/pre-icon02.png" alt="" class="v-top mr-15p" style="width: 18px; height: 18px" />
                        <span>充值记录</span>
                    </div>
                    <span class="iconfont iconArrowRight text-999" style="font-size: 12px"></span>
                </div>
                <!-- <div class="d-flex py-15p border-bottom px-1 a-center" @click="toPage('balanceCode')">
                    <div class="flex-1 d-flex a-center">
                        <img src="@/assets/images/pre-icon03.png" alt="" class="v-top mr-15p" style="width: 18px; height: 18px" />
                        <span>交易密码</span>
                    </div>
                    <span class="iconfont iconArrowRight text-999" style="font-size: 12px"></span>
                </div> -->
                <div class="d-flex py-15p border-bottom px-1 a-center" @click="toPage('balanceExplain')">
                    <div class="flex-1 d-flex a-center">
                        <img src="@/assets/images/pre-icon08.png" alt="" class="v-top mr-15p" style="width: 18px; height: 18px" />
                        <span>会员优惠</span>
                    </div>
                    <span class="iconfont iconArrowRight text-999" style="font-size: 12px"></span>
                </div>
            </div>
        </div>

        <van-dialog v-model="showDialog" @confirm="$toPage('balanceCode')" @cancel="showDialog = false" title="提示" show-cancel-button>
            <div class="font-14 p-2 text-center">
                <span>您还没有设置交易密码，请前往设置交易密码!</span>
            </div>
        </van-dialog>
    </div>
</template>

<script>
import { predepositHome } from '@/api/balance.js'
import cash from 'utils/tool'

export default {
    name: '',
    components: {},
    data() {
        return {
            indexData: {}, // 首页数据
            showDialog: false,
            money: cash,
            indexStatus: false // 首页数据数据加载失败true => 加载失败， false=> 成功
        }
    },
    computed: {},
    watch: {},
    created() {},
    destroyed() {},
    mounted() {
        this.getIndex()
    },
    methods: {
        // 跳转页面
        toPage(name, query) {
            if (!this.indexData.setupPayPassword) {
                this.showDialog = true
                return
            }
            this.$router.push({ name, query })
        },

        // 获取首页数据
        getIndex() {
            predepositHome()
                .then((res) => {
                    if (!res.success) {
                        this.$toast(res.msg)
                        this.indexStatus = true
                        return
                    }
                    this.indexData = res.result
                    if (!res.result.setupPayPassword) {
                        this.showDialog = true
                    }
                    this.indexStatus = false
                })
                .catch((err) => {
                })
        }
    }
}
</script>

<style scoped>
.line {
    position: relative;
}
.line:after {
    position: absolute;
    content: '';
    top: 25%;
    right: 0;
    width: 1px;
    height: 20px;
    color: #fff;
    background: #fff;
}

.active {
    background: rgba(255, 0, 0, 0.1) !important;
    border: 1px solid #f56c6c;
    color: #ff4843 !important;
    padding: 9px;
}

.activeInput {
    border: 1px solid #f56c6c;
    color: #ff4843 !important;
    padding: 19px;
}
</style>
